<template>
  <div class="console">
    <div class="console-content">
      <div class="left">
        <CardList :top-Data="topData" :key="topKey"></CardList>

        <el-row :gutter="20">
          <el-col :sm="24" :md="24" :lg="12">
            <ActiveUser v-loading="homeLoading" :member-RecordData="memberRecordData" :key="memberRecordKey" />
          </el-col>
          <el-col :sm="24" :md="24" :lg="12">
            <SalesOverview v-loading="homeLoading" :member-Data="memberData" :key="memberKey" />
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :sm="24" :md="24" :lg="12">
            <studentsClass />
          </el-col>
          <el-col :sm="24" :md="24" :lg="12">
            <!-- <Dynamic /> -->
            <NewUser />
          </el-col>
          <!-- <el-col :sm="24" :md="12" :lg="6">
            <TodoList />
          </el-col> -->
        </el-row>
      </div>
      <div class="right">
        <div class="tempbigbox_rightbox">
          <div class="personInfo">
            <div class="header">
              <img :src="setMenu.storeLogo" style="border-radius: 50%; width: 50px; height: 50px" />
              <span class="title">{{ setMenu.storeName }}</span>
            </div>
            <div class="version">
              <div>驾校ID：<span class="info-text">{{ setMenu.id }}</span></div>
            </div>
            <div class="version">
              <div>小程序版本号：<span class="info-text">{{ setMenu.wxVersionNumber }}</span></div>
              <div @click="toPage(0)" style="cursor: pointer;">立即访问<i class="iconfont-sys icon">&#xe865;</i></div>
            </div>
            <div class="header">
              <span>版本套餐：</span>
              <span class="info-text">{{ setMenu.thaliName }}</span>
            </div>
            <div class="header">
              <span>到期时间：</span>
              <span class="info-text">{{ setMenu.thaliTime }}</span>
            </div>
            <div class="btn" @click="handleRenew">立即续费</div>
          </div>

          <div class="tools">
            <div class="title">快捷工具</div>
            <div class="list">
              <div class="list-item" @click="toPage(0)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe828;</i></div>
                <div>小程序设置</div>
              </div>
              <div class="list-item" @click="toPage(1)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe70f;</i></div>
                <div>驾校管理</div>
              </div>
              <div class="list-item" @click="toPage(2)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe745;</i></div>
                <div>题库管理</div>
              </div>
              <div class="list-item" @click="toPage(3)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe81a;</i></div>
                <div>学员档案</div>
              </div>
              <div class="list-item" @click="toPage(4)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe82c;</i></div>
                <div>会员管理</div>
              </div>
              <div class="list-item" @click="toPage(5)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe843;</i></div>
                <div>订单管理</div>
              </div>
              <div class="list-item" @click="toPage(6)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe862;</i></div>
                <div>数据概况</div>
              </div>
              <div class="list-item" @click="toPage(7)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe66e;</i></div>
                <div>分销推广</div>
              </div>
              <div class="list-item" @click="toPage(8)">
                <div class="list-icon"><i class="iconfont-sys icon">&#xe78b;</i></div>
                <div>更新日志</div>
              </div>
            </div>
          </div>

          <div class="rightboxgonggao">
            <div class="tempbigbox_rightbox_dynamics_title">
              <p class="tempbigbox_rightbox_dynamics_title_pone">帮助中心</p>
              <p class="tempbigbox_rightbox_dynamics_title_ptwo" @click="toViewMore">查看更多></p>
            </div>
            <div class="rightboxgonggao_ul">
              <div class="rightboxgonggao_ul_bigbox" v-for="(item, index) in helpCenter" :key="index"
                @click="openElmessage(index, item)">
                <div class="rightboxgonggao_ul_nums">{{ index + 1 }}</div>
                <div class="rightboxgonggao_ul_cont">{{ item.title }}</div>
                <div class="rightboxgonggao_ul_label" v-if="index == 0">置顶</div>
              </div>
            </div>
          </div>
          <!-- 专属客服微信图片 -->
          <div class="tempbigbox_rightbox_cont_three">
            <div class="tempbigbox_rightbox_cont_three_top">
              <div class="tempbigbox_rightbox_cont_three_img">
                <img src="@/assets/img/service.png" />
              </div>
              <div class="tempbigbox_rightbox_cont_three_title">
                <p class="tempbigbox_rightbox_cont_three_title_p1">您好，我是
                  {{ customerInfo.customerName }}</p>
                <p class="tempbigbox_rightbox_cont_three_title_p2">您的专属技术顾问</p>
              </div>
            </div>
            <div class="tempbigbox_rightbox_cont_three_center">
              <div class="tempbigbox_rightbox_cont_three_center_imgbox">
                <img :src="customerInfo.wxUrl" />
                <p>功能讲解·案例分享·需求反馈</p>
              </div>
              <div class="tempbigbox_rightbox_cont_three_bottom">
                <p class="tempbigbox_rightbox_cont_three_bottom_left">售后咨询：</p>
                <p class="tempbigbox_rightbox_cont_three_bottom_center">
                  {{ customerInfo.mobile }}</p>
                <p class="tempbigbox_rightbox_cont_three_bottom_right" @click="copyToClipboard(customerInfo.mobile)"
                  v-if="customerInfo.mobile">
                  复制
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="helpDialog" :title="helpTitle" width="30%" :close-on-click-modal="false">
      <div class="updateTime">发布时间：{{ updateTime }}</div>
      <div v-html="htmlContent"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import CardList from './widget/CardList.vue'
import ActiveUser from './widget/ActiveUser.vue'
import SalesOverview from './widget/SalesOverview.vue'
import NewUser from './widget/NewUser.vue'
// import StudentClass from './widget/studentClass.vue'
import studentsClass from './widget/studentsClass.vue'
import Dynamic from './widget/Dynamic.vue'
import TodoList from './widget/TodoList.vue'
import { useCommon } from '@/composables/useCommon'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

import { getNoticeList, homePageInfo } from '@/api/homeApi'
import { BasicSetting, getRoleCodeList } from '@/api/driverSchoolApi'
import { getCustomerInfo } from '@/api/ApiList'
import { useUserStore } from '@/store/modules/user'
import { Loading } from 'xgplayer'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)
const timerRef = ref<ReturnType<typeof setInterval> | null>(null)
const helpDialog = ref(false)
const helpTitle = ref('')
const topKey = ref(0)
const memberRecordKey = ref(0)
const memberKey = ref(0)
const homeLoading = ref(false)

const roleIds = computed(() => userStore.roleIds)

import { useTemporaryStore } from '@/store/modules/temporary'
const useTemporaryData = useTemporaryStore()


defineOptions({ name: 'Console' })

useCommon().scrollToTop()

const helpCenter = ref<HelpItem[]>([])
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
async function getData() {
  try {
    const { code, data } = await getNoticeList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      type: 2
    })
    if (code === '00000') {
      helpCenter.value = data.list
      pageTotal.value = data.total
    }
  } catch (e) {
  } finally {
  }
}
interface setMenus {
  storeLogo: string
  storeName: string
  thaliName: string
  thaliTime: string
  wxVersionNumber: string
  id: string
}
const setMenu = ref<setMenus>({} as setMenus)
async function getSetting() {
  try {
    const { code, data } = await BasicSetting()
    if (code === '00000') {
      setMenu.value = data
    }
  } catch (e) {
  } finally {
  }
}

interface customer {
  wxUrl: string
  customerName: string
  mobile: string
}
const customerInfo = ref<customer>({} as customer)
async function getCustomerData() {
  let id: string = userInfo.value.id + ''
  const res = await getCustomerInfo(id)
  if (res.code === '00000' && res.data) {
    customerInfo.value = res.data
  }
}

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage('复制成功')
  } catch (err) {
    console.error('复制失败:', err)
  }
}
const htmlContent = ref('')
const updateTime = ref('')
interface HelpItem {
  title: string;
  content: string;
  updateTime: string;
}
const openElmessage = (i: number, item: HelpItem) => {
  console.log(i)
  helpDialog.value = true
  helpTitle.value = item.title
  htmlContent.value = item.content
  updateTime.value = item.updateTime
}
const topData = ref({})
const memberRecordData = ref({})
const memberData = ref({})
const getHomePageData = async () => {
  try {
    homeLoading.value = true
    const res = await homePageInfo()
    if (res.code === '00000') {
      topData.value = res.data.topData ? res.data.topData : {}
      memberRecordData.value = res.data.memberRecordData
      memberData.value = res.data.memberData
      topKey.value = new Date().getTime()
      memberRecordKey.value = new Date().getTime()
      memberKey.value = new Date().getTime()
    }
  } catch {

  } finally {
    homeLoading.value = false
  }
}
const pageRoutes = [
  '/dashboard/ecommerce/channel_wx', //1121
  '/drivingschool/DrivingschoolManagement', //121
  '/question_bank/question_list',//141
  '/user_student/StudentProfile',//172
  '/user_student/member/ArticleList',//1731
  '/order/viporder',//161
  '/safeguard/data_console',//181
  '/result/distributioncenter/distributioncenter_overview',//1521
  '/system/change/log',//194
]

const toPage = (e: number) => {
  if (pageRoutes[e]) {
    const requiredRoleIds = ['1121', '121', '141', '172', '1731', '161', '181', '1521', '194']
    const requiredId = requiredRoleIds[e]
    const hasPermission = roleIds.value.includes(requiredId)
    if (!hasPermission) {
      ElMessage.warning('您没有权限访问该页面')
      return
    }
    router.push({ path: pageRoutes[e] })
  } else {
    ElMessage.warning('暂未开放或未配置跳转')
  }
}

const allSelectRole = async () => {
  // const res = await getRoleCodeList({ codes: codeId.value })
}

const toViewMore = () => {
  window.open('https://www.yuque.com/dashboard/books')
}

const handleRenew = () => {
  useTemporaryData.setDrivingSchoolInfo(setMenu.value)
  router.push(`/drivingSchoolConsole/add?step=2&isRenewal=1`)
}

onMounted(() => {
  getData()
  getSetting()
  getCustomerData()
  getHomePageData()
  allSelectRole()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timerRef.value) {
    clearInterval(timerRef.value)
    timerRef.value = null
  }
})
</script>

<style lang="scss" scoped>
@use './style';

.console-content {
  display: flex;

  .left {
    flex: 1;
  }

  .right {
    width: 320px;
  }
}

.tempbigbox_rightbox {
  border-radius: 0.5rem;
}

.tempbigbox_rightbox_cont_three {
  height: 330px;
  background: #fff;
  overflow: hidden;
  padding: 20px 20px;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
}

.tempbigbox_rightbox_cont_three_top {
  display: flex;
  height: 60px;
}

.tempbigbox_rightbox_cont_three_img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.tempbigbox_rightbox_cont_three_img img {
  width: 100%;
  height: 100%;
}

.tempbigbox_rightbox_cont_three_title {
  height: 56px;
  margin-left: 20px;
}

.tempbigbox_rightbox_cont_three_title_p1 {
  font-size: 14px;
  font-weight: bold;
}

.tempbigbox_rightbox_cont_three_title_p2 {
  font-size: 12px;
  padding: 6px;
  border-radius: 4px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  display: inline-block;
  margin-top: 5px;
}

.tempbigbox_rightbox_cont_three_center_imgbox {
  width: 60%;
  margin-left: 20%;
  margin-top: 10px;
}

.tempbigbox_rightbox_cont_three_center_imgbox img {
  width: 100%;
}

.tempbigbox_rightbox_cont_three_center_imgbox p {
  font-size: 12px;
  color: #999;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  white-space: nowrap;
}

.tempbigbox_rightbox_cont_three_bottom {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  // margin-top: 20px;
  display: flex;
  color: #333;
}

.tempbigbox_rightbox_cont_three_bottom_left {
  margin-left: 10px;
}

.tempbigbox_rightbox_cont_three_bottom_center {
  margin-left: 10px;
}

.tempbigbox_rightbox_cont_three_bottom_right {
  padding-left: 10px;
  cursor: pointer;
}

.gzhbox {
  height: 120px;
  background: #fff;
  overflow: hidden;
  padding: 20px 20px;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
}

.gzhbox_one {
  width: 100%;
  height: 48px;
}

.gzhbox_one_left {
  width: 48px;
  height: 48px;
}

.gzhbox_one_left img {
  width: 100%;
  height: 100%;
}

.gzhbox_one_right {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  margin-left: 10px;
}

.gzhbox_one_right_title {
  color: #202124;
  font-weight: bold;
  font-size: 18px;
}

.gzhbox_two {
  height: 220px;
  background: #fff;
  overflow: hidden;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
}

.gzhbox_two button {
  width: 40%;
  margin-top: 20px;
  display: flex;
  margin-left: 6.7%;
}

.rightboxgonggao {
  height: 260px;
  background: #fff;
  // overflow: hidden;
  overflow: auto;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
  padding-bottom: 10px;
}

.rightboxgonggao_ul {
  margin-top: 20px;
}

.rightboxgonggao_ul_bigbox {
  display: flex;
  height: 20px;
  line-height: 20px;
  margin-top: 10px;
  cursor: pointer;
}

.rightboxgonggao_ul_bigbox {
  margin-left: 5%;
}

.rightboxgonggao_ul_nums {
  width: 16px;
  height: 16px;
  background-color: var(--el-color-primary-light-9);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: var(--el-color-primary);
}

.rightboxgonggao_ul_cont {
  margin-left: 10px;
  height: 16px;
  line-height: 16px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}

.rightboxgonggao_ul_label {
  font-size: 12px;
  width: 32px;
  height: 18px;
  border: 1px solid var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
}

.tempbigbox_rightbox_dynamics_title {
  height: 50px;
  line-height: 50px;
  margin: 0px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tempbigbox_rightbox_dynamics_title_pone {
  font-size: 1rem;
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.tempbigbox_rightbox_dynamics_title_ptwo {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.personInfo {
  height: 280px;
  background: #fff;
  overflow: hidden;
  margin-left: 7%;
  border-radius: 12px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
  box-sizing: border-box;
  padding: 20px;
  background: linear-gradient(#e9f8f5, #fff);
  font-size: 14px;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #999;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-color-primary);
      margin-left: 10px;
    }
  }

  .info-text {
    color: var(--art-text-gray-700);
  }

  .version {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #999;
  }

  .btn {
    background-color: var(--el-color-primary);
    color: #fff;
    width: 100%;
    height: 36px;
    border-radius: 15px;
    font-size: 14px;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.tools {
  height: 300px;
  background: #fff;
  overflow: hidden;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 20px 0 rgba(11, 3, 6, 0.1);
  box-sizing: border-box;
  padding: 20px;
  background: linear-gradient(#e9f8f5, #fff 20%);
  font-size: 14px;

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 12px;

    .list-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      cursor: pointer;

      .list-icon {
        color: var(--el-color-primary) !important;
        text-align: center;
        background-color: var(--el-color-primary-light-9);
        border-radius: 12px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;

        .iconfont-sys {
          font-size: 20px;
        }
      }
    }
  }
}

:deep(.el-dialog__title) {
  font-weight: bold !important;
}

.updateTime {
  margin: -30px 0 20px 0;
  font-size: 12px;
}

:deep(.el-dialog) {
  padding: 30px !important;
}
</style>
